<template>
	<!-- 流程节点列表 -->
	<view class="flow" ref="flow">
		<view v-if="!dataSource.length">
			<u-empty
				mode="data"
				icon="/static/empty/data.png"
				text="暂无流程图~"
			>
			</u-empty>
		</view>
		<view class="flow_lists" v-for="(item,index) in dataSource" :key="item.id + index" v-else>
			<view class="flow_image">
				<!-- <image src="" mode="aspectFill" class="flow_img1"></image> -->
				<u-avatar src="" shape="square" class="flow_img1"></u-avatar>
				<image v-if="item.opUserName" src="/static/synergy/success.png" mode="aspectFill" class="flow_img2"></image>
				<image v-else :src=" item.deleteReason | avatarChange(item.remarks)" mode="aspectFill" class="flow_img2"></image>
			</view>
			<view class="flow_right">
				<view class="flow_content">
					<view class="flow_content_left">
						<view>{{ index == 0?'发起申请':item.name == 'end'?'结束': item.taskName|| item.name }}</view>
						<view>{{ item.assigneeName || item.opUserName }} {{ index == 0?'':item.deleteReason?`(${item.deleteReason})`:'' }}</view>
					</view>
					<view class="flow_content_time">
						<view>{{ item.endDate }}</view>
						<view>{{ item.endDateTime}}</view>
					</view>
				</view>
				<view class="flow_commont" v-if="item.remarks" :id="vId">
					{{ item.remarks }}
				</view>
				<view  v-if="item.bpmFiles && item.bpmFiles.length" class="flow_commont_file">
					<file-list :fileList="item.bpmFiles" :flowList="true"></file-list>
				</view>
			</view>
		</view>
		<view class="vertical" :style="{height: flowHeight + 'px'}"></view>
	</view>
</template>
<script>
	import fileList from './fileList.vue'
	
	export default {
		components: {
			fileList,
		},
		data() {
			return {
				flowHeight: null,
				vId: uni.$u.guid(),
				detailData: 'temp/1Hk4WDpWx1nHc0YvVr1EuaeHwl8r1R1JiI5y6Lb6KvlHoA0o1WAC96QN.jpg'
			}
		},
		props: {
			dataSource: {
				type: Array,
				default: () => []
			},
		},
		filters: {
			avatarChange(val,remark){
				if(remark && val){
					return '/static/synergy/comment.png'
				}
				if(val == '已完成'){
					return '/static/synergy/success.png'
				} else {
					return '/static/synergy/progress.png'
				}
			}
		},
		watch: {
			dataSource(val){
				var length = val.filter(v => !!v.remarks).length
				var that = this
				if(length > 0){
					this.$nextTick(function(){
						// this.flowHeight = val.length * 40 + length * 48
						// val.forEach((item,index) => {
						// 	if(item.remarks){
						// 		this.flowHeight += this.setContentMain(this.vId)
						// 	}
						// })
						uni.createSelectorQuery().in(this).select('.flow').boundingClientRect(data => {
							// height = data.height
							this.flowHeight = data.height - 40
						}).exec()
					})
				} else {
					this.flowHeight = val.length * 40
				}
				if (val && val.length) {
					val.map((item, index) => {
						var endTime = []
						if (item.endTime) {
							endTime = item.endTime.split(' ')
							this.dataSource[index].endDate = endTime[0]
							this.dataSource[index].endDateTime = endTime[1]
						}
						if (item.opTime) {
							endTime = item.opTime.split(' ')
							this.dataSource[index].endDate = endTime[0]
							this.dataSource[index].endDateTime = endTime[1]
						}
					})
				}
				// var length = val.filter(v => v.remarks).length
				// this.flowHeight = val.length * 40 + length * 80
			}
		},
		methods: {
			setContentMain(key) {
				var height = 0
				uni.createSelectorQuery().in(this).select('#'+key).boundingClientRect(data => {
					height = data.height - 40
				}).exec()
				return height
			},
		}
	}
</script>
<style lang="scss" scoped>
.flow{
	padding-top: 10px;
	position: relative;
	.vertical{
		position: absolute;
		left: 21px;
		top: 35px;
		width: 2rpx;
		background: #E5E5E5;
		z-index: 0;
	}
	.flow_lists{
		display: flex;
		margin-bottom: 40px;
		.flow_image{
			position: relative;
			width: 40px;
			height: 40px;
			// border-radius: 5px;
			// border: 1px solid red;
			z-index: 10;
			.flow_img1{
				width: 100%;
				height: 100%;
			}
			.flow_img2{
				width: 16px;
				height: 16px;
				position: absolute;
				right: -8px;
				bottom: -4px;
			}
		}
		.flow_right{
			flex: 1;
			margin-left: 20rpx;
			.flow_content{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.flow_content_left{
					font-size: 14px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #B2B2B2;
					line-height: 20px;
					flex: 1;
					view:nth-child(2){
						font-size: 16px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #171717;
						line-height: 22px;
					}
				}
				.flow_content_time{
					font-size: 14px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #B2B2B2;
					line-height: 20px;
					text-align: right;
				}
			}
			.flow_commont{
				background: rgba(194,216,255,0.5);
				border-radius: 0px 6px 6px 6px;
				margin-top: 8px;
				padding: 10px 16rpx;
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #7F7F7F;
				line-height: 20px;
				word-break: break-all;
			}
			.flow_commont_file{
				background: rgba(194,216,255,0.5);
				border-radius: 0px 6px 6px 6px;
				margin-top: 8px;
				padding: 0rpx 16rpx;
				// font-size: 14px;
				// font-family: PingFangSC-Regular, PingFang SC;
				// font-weight: 400;
				// color: #7F7F7F;
				// line-height: 20px;
				// word-break: break-all;
			}
		}
	}
}
</style>